<template>
	<view class="checkin">
		<view class="success" v-if="hasCheckin">
			<view class="circle">
				<u-icon name="checkbox-mark" color="#fff" size="30"></u-icon>
			</view>
			<text class="normal">签到成功</text>
			<text class="tips">感谢你预约恩平市迅豪二手车交易市场有限公司办理业务</text>
		</view>
		
		<view class="success" v-if="error">
			<view class="error circle">
				<u-icon name="error" color="#fff" size="30"></u-icon>
			</view>
			<!-- <text class="normal">签到成功</text> -->
			<text class="tips">{{error}}</text>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/appointment.js'
	export default {
		data() {
			return {
				hasCheckin: false,
				error: ''
			};
		},
		onLoad(query) {
			// scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
			const scene = decodeURIComponent(query.scene)
			const appointmentId = scene.split('=')[1]
			// 签到
			this.checkin(appointmentId)
		},
		methods: {
			checkin(appointmentId) {
				wx.login({
					success: (res) => {
						Api.checkin({
							appointmentId,
							"code": res.code,
						}).then(res => {
							// 签到成功
							this.hasCheckin = true
						}).catch(err => {
							this.error = err.message
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.checkin {
		.success {
			padding: 150px 60px 0;
			@include flex(column);
			align-items: center;
			justify-content: center;
		
			.circle {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #5AC725;
				border-radius: 50%;
				width: 154.2rpx;
				height: 154.2rpx;
				align-items: center;
				justify-content: center;
				
				&.error{
					background-color: #ff9900;
				}
			}
		
			.normal {
				font-size: 15px;
				color: #5AC725;
				margin-top: 15px;
			}
		
			.tips {
				color: #606266;
				font-size: 13px;
				margin-top: 15px;
				text-align: center;
				line-height: 1.5;
			}
		}
	}
</style>
